<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>详情页</title>
    <link rel="stylesheet" href="/libs/bootstrap/bootstrap.min.css">
    <link rel="stylesheet" href="/css/detail.css">
    <script src='/libs/jquery/jquery-3.2.1.js'></script>
    <script src='/libs/bootstrap/bootstrap.min.js'></script>
</head>

<body>
    <header></header>
    <section>
        <div class="detail-top">
            <ul>
                <li><a href="">产品描述</a></li>
                <li><a href="">用户评价</a></li>
                <li><a href="">概览</a></li>
            </ul>
        </div>
        <div class="detail" id="detail">
            <script type="text/html" id="detail-template">
                <div class='detaConLeft'>
                    <div class="detaphoneImg">
                      <img class="zoom-img" src="{{imgs[0]}}" data-zoom-image="{{imgs[0]}}" alt="">  
                    </div>
                    <div class="smallCarusel">
                        <div>
                            <ul class="carousel" id="gal1">
                                {{each imgs img}}
                                <li>
                                    <a href="#" data-image="{{img}}" data-zoom-image="{{img}}">
                                        <img src="{{img}}" alt="">
                                    </a>
                                </li>
                                {{/each}}
                            </ul>
                        </div>
                    </div>
                </div>

                    <div class="detail-right">
                        <h3>{{name}}</h3>
                        <div>
                            <span></span>
                            <a href="">（{{n}}条用户评价）</a>
                        </div>
                        <ul class="parameter">
                            <li>8GB&nbsp;RAM+256GB&nbsp;SSD</li>
                            <li>Intel&nbsp;Core&nbsp;M&nbsp;7Y30</li>
                            <li>2560×1440分辨率</li>
                        </ul>
                        <p>￥{{price}}</p>
                        <ul class="flag">
                            <li class="flag-1">
                                SKU标识
                                <span>22916525841</span>
                            </li>
                            <li class="flag-2">
                                产品类别
                                <a href="/">Windows</a>
                            </li>
                            <li class="flag-3">
                                特色标签
                                <span class="box-1"><a href="/">coreM</a></span>
                                <span class="box"><a href="/">win10平板</a></span>
                                <span class="box"><a href="/">旗舰</a></span>
                            </li>
                        </ul>
                        <form action="">
                            <span> 套餐类型</span>
                            <span class="button">单平板</span>
                            <span class="button">平板+键盘</span>
                            <p>库存xx件</p>
                            <span>数量选择</span>
                            <div class="reduce">-</div>
                            <input type="text" value="1">
                            <div class="plus">+</div>
                            <div class="check">
                                    <div class="buy">立即购买</div>
                                    <div class="add" id="addToCart">加入购物车</div>
                            </div>
                        </form>
                    </div>
            </script>
        </div>
    </section>
    <div class="shopCart">
        <a href="/html/cart.html">购物车</a>
        <b id="shopNum">0</b>
    </div>
    <footer></footer>

</body>
<script src="/libs/requirejs/require.min.js" data-main="/js/detail"></script>

</html>